<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-image: url("zombies/bg1.jpg");
            overflow: hidden;//去掉拖动条
        }
        img{
            width: 100px;
            height: 100px;
            position: absolute;/*绝对定位*/
        }
    </style>
</head>
<body>
<h3 id="s_h3">干掉僵尸数量:0</h3>
<h3 id="f_h3">跑掉僵尸数量:0</h3>
<script src="../js/jquery-1.4.2.js"></script>
<script>
    let sCount=0;
    let fCount=0;
    //得到窗口的宽高
    let w = $(window).width();
    let h = $(window).height();
    //给背景图片设置尺寸   200px 200px
    $("body").css("background-size",w+"px "+h+"px");
    //窗口尺寸改变事件
    onresize=function () {
        //得到窗口宽高
        let w=$(window).width()
        let h=$(window).height()
        //给背景图片设置尺寸
        $('body').css('background-size',w+"px "+h+"px")
    }
    //开启添加僵尸的定时器
    setInterval(function () {
        /*
        * sCount
        * 0-19  0
        * 20-39 1
        * 40-59 2
        * 60-.. 3
        * */
        let type=parseInt(sCount/20)
        type=type>3?3:type
        //创建僵尸图片
        let zomb=$('<img src="zombies/zomb'+type+'.png">')
        //设置僵尸显示的位置
        let top=parseInt(Math.random()*(h-100));
        zomb.css({"left":w+"px","top":top+"px"});
        $('body').append(zomb);
        //给僵尸图片添加鼠标移入事件
        zomb.mouseover(function () {
            zomb.remove()//删除僵尸
            //记录成功数量
            sCount++
            $('#s_h3').text('成功干掉僵尸数量:'+sCount)
        })
    },200);
    //开启移动僵尸的定时器
    setInterval(function () {
        //得到所有僵尸图片并遍历
        $('img').each(function () {
            //得到僵尸的left值 this代表当前遍历的元素对象 是js对象
            let left=parseInt($(this).css('left'))
            left-=1
            //把变小的left再次赋值给僵尸图片
            $(this).css('left',left+'px')
            //判断僵尸是否到房子位置
            if(left<=100){
                $(this).remove()
                //统计失败数量
                fCount++
                $('#f_h3').text('跑掉僵尸数量:'+fCount)
                //判断游戏结束条件
                if (fCount>=10){
                    //因为alert方法优先级比较高页面显示9时就会弹出
                    // 因此让alert晚执行0.1s 解决此问题
                    setTimeout(function () {
                        alert("游戏结束!共干掉"+sCount+"个僵尸")
                        location.reload()
                    },100)
                }
            }
        })
    },10)
</script>
</body>
</html>